<template>
	<view class="con">
		<view class="title">
			手机号授权
		</view>
		<view class="text">
			申请获取你的微信绑定的手机号
		</view>
		<image class="img" src="../../static/login.png" mode=""></image>
		<button class="but" open-type="getPhoneNumber" @getphonenumber="Phone">
			手机号授权
		</button>
		<view class="xyys">
			<image class="xyys_img" src="../../static/xz.png" mode="" v-if="xztype" @click="xztype=!xztype"></image>
			<image class="xyys_img" src="../../static/wxz.png" mode="" v-if="!xztype" @click="xztype=!xztype"></image>
			阅读并同意《<text @click="open(1)">用户服务协议</text>》《<text @click="open(2)">隐私政策</text>》
		</view>

		<uni-popup ref="popup" :mask-click="false" type="center">
			<view class="popup_box">
				<view class="popup_box_title">
					发布协议
				</view>
				<view class="popup_box_text">
					{{textvalue}}
				</view>
				<view class="popup_box_but" @click="close(true)">
					同意并继续
				</view>
				<image class="popup_gb" src="../../static/gb.png" mode="" @click="close(false)"></image>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				textvalue: '',
				xztype: false
			}
		},
		methods: {
			Phone(e) {
				console.log('获取手机号的code', e.detail.code);
			},
			open(value) {
				if (value == 1) {
					this.textvalue =
						'内容占位，欢迎光临，请您仔细阅读以下条款，如果您对本协议的任何条款表示异议，您可以选择不在发布您对本协议的任何条款表示异议，您可以选择不在发布您对本协议的任何条款表示异议，您可以选择不在发布您对本协议的任何条款表示异议，您可以选择不在发布您对本协议的任何条款表示异议，您可以选择不在发布信息；发布则意味着您将同意遵守本协议下全部规定，并完全服从于的统一管理。内容占位，欢迎光临，请您仔细阅读以下条款，如果您对本协议的任何条款表示异议，您可以选择不在发布信息；发布则意味着您将同意遵守本协议下全部规定，并完全服从于的统一管理。内容占位，欢迎光临，请您仔细阅读以下条款，如果您对本协议的任何条款表示异议，您可以选择不在发布信息；发布则意味着您将同意遵守本协议下全部规定，并完全服从于的统一管理。'
				} else {
					this.textvalue = '隐私政策'
				}
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
			},
			close(value) {
				if (value) {
					this.xztype = value
				} 
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="less" scoped>
	.con {
		padding-top: 180rpx;
		width: 750rpx;
		background-color: #eef1f6;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		button {
			padding: 0;
			margin: 0;
			background-color: rgba(34, 24, 20, 0);
		}

		button::after {
			border: 0;
		}

		.title {
			font-size: 42rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 30rpx;
		}

		.text {
			font-size: 24rpx;
			font-weight: 500;
			color: #727272;
			margin-bottom: 130rpx;
		}

		.img {
			width: 565rpx;
			height: 336rpx;
			margin-bottom: 15rpx;
		}

		.but {

			width: 400rpx;
			height: 100rpx;
			background: #00b2fc;
			border-radius: 50rpx;
			box-shadow: 0rpx 10rpx 15rpx 15rpx rgba(10, 133, 185, 0.20);
			font-size: 36rpx;
			font-weight: 500;
			text-align: center;
			color: #ffffff;
			line-height: 100rpx;
			margin-bottom: 108rpx;

		}

		.xyys {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;

			.xyys_img {
				width: 28rpx;
				height: 28rpx;
				margin-right: 15rpx;
			}

			text {
				color: #00B2FC;
				text-decoration: underline
			}
		}
	}

	.popup_box {
		position: relative;
		padding: 35rpx 26rpx;
		width: 510rpx;
		background: linear-gradient(0deg, #ffffff 80%, #4084fc 100%);
		border-radius: 16rpx;

		.popup_box_title {
			width: 100%;
			font-size: 30rpx;
			font-weight: 700;
			text-align: center;
			color: #000000;
			margin-bottom: 33rpx;
		}

		.popup_box_text {
			max-height: 483rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #383838;
			line-height: 42rpx;
			overflow-y: auto;
			margin-bottom: 33rpx;
		}

		.popup_box_but {
			margin: 0 auto;
			width: 450rpx;
			height: 72rpx;
			background: #3d89f1;
			border-radius: 36rpx;
			font-size: 30rpx;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			line-height: 72rpx;

		}

		.popup_gb {
			position: absolute;
			bottom: -80rpx;
			left: 45%;
			width: 42rpx;
			height: 42rpx;
		}
	}
</style>